<template>
  <div class="login">
      <div class="logo">
          <img src="http://ot9lfn4ld.bkt.clouddn.com/loginlogo.png" alt="logo">
      </div>
      <div class="form">
          <div class="name">
              <img src="http://ot9lfn4ld.bkt.clouddn.com/icon_zhuceye_person.png" alt="">
              <input type="text" v-model="uname">
          </div>
          <div class="pwd">
              <img src="http://ot9lfn4ld.bkt.clouddn.com/icon_zhuceye_lock.png" alt="">
              <input type="password" v-model="upwd">
          </div>
          <div class="btn"> 
              <a href="javascript:;" @click="goindex">
                <Linebtn :btntext="btntext"></Linebtn>
              </a> 
          </div>
      </div>
      <div class="reg">
          <a>忘记密码?</a>
          <span>|</span>
          <router-link :to="{name:'Reg',params:{id:1}}">立即注册></router-link>
      </div>
      <div class="imgbox">
          <Thirdparty></Thirdparty>
      </div>
  </div>
</template>
<script>
import Linebtn from "../components/linebtn";
import Thirdparty from "../components/thirdparty";
import {data} from '../../util/mock/mock';
export default {
  name:'login',
  data(){
      return {
          uname:'', //用户名
          upwd:'',   //密码
          btntext:'提交' // 按钮文字
      }
  },
  components:{
      Linebtn,
      Thirdparty
  },
  methods:{
      goindex(){
          let timer = null;
          clearTimeout(timer);
          if(this.uname.trim()=='' || this.upwd.trim()==''){
              this.btntext = '登录失败'
              const that = this;
              timer = setTimeout(function() {
                  that.btntext = '提交'
              }, 500);
              return false;
          }else {
            this.$http.get(this.$store.state.host+'/love/login/'+this.uname+'/'+this.upwd)
          .then(res=>{
               if(res.data.state){
                   this.$store.commit('setusername','haha');                  
                   this.$router.push('/main');
              }else {
                this.btntext = '登录失败'
                const that = this;
                timer = setTimeout(function() {
                    that.btntext = '提交'
                }, 500);
              } 
             
          }); 
          }
          
      }
  }
}
</script>
<style lang="less" scoped>
@w:75rem;
    .logo{
        text-align: center;
        margin-top: 140/@w;
        margin-bottom: 170/@w;
        img {
            width: 170/@w;
            height: 150/@w;
        }
    }
    .form {
        width: 552/@w;
        margin: 0 auto;
        .name , .pwd {
            overflow: hidden;
        }
        div {
            margin-bottom: 70/@w;
            // overflow: hidden;
        }
        img {
            width: 43/@w;
            height: 46/@w;
            float: left;
            margin-right: 20/@w;
        }
        input {
            height: 46/@w;
            width: 480/@w;
            padding: 0;
            float: left;
            font-size: 28/@w;
            text-indent: 40px;
            -webkit-appearance: none;
            outline: none;
            border: none;
            background: transparent;
            border: none;
            border-bottom: 1px solid #808080;
            border-radius: 0;//清除苹果系统input框圆角 
        }
        .btn {
            border-radius: 10px;
            height: 140/@w;
        }
    }
    .reg {
        text-align: center;
        font-size: 28/@w;
        a {
            font-size: 28/@w;
            color: #808080;
        }
    }
    .imgbox {
        overflow: hidden;
        text-align: center;
    }
    .el-message {
        width: 100%;
        height: 30/@w;
    }
</style>

